<script setup>
import {ref, watch, reactive} from "vue";
import {VueUiThermometer} from "vue-data-ui";
import "vue-data-ui/style.css"


const config = ref({
  "theme": "",
  "customPalette": [],
  "style": {
    "fontFamily": "inherit",
    "chart": {
      "backgroundColor": "#FFFFFF00",
      "color": "#1A1A1Aff",
      "height": 240,
      "thermometer": {"width": 24},
      "padding": {"top": 12, "right": 4, "bottom": 12, "left": 64},
      "graduations": {
        "show": true,
        "sides": "both",
        "height": 2,
        "stroke": "#fffef5ff",
        "strokeWidth": 2.000000000000001,
        "showIntermediate": true,
        "gradient": {"show": true, "intensity": "6"}
      },
      "animation": {"use": true, "speedMs": 1000},
      "label": {
        "fontSize": 20,
        "rounding": 1,
        "bold": true,
        "color": "#595959ff",
        "prefix": "",
        "suffix": "℃",
        "formatter": null
      }
    },
    "title": {
      "text": "",
      "color": "#292929ff",
      "fontSize": 30,
      "bold": true,
      "textAlign": "left",
      "paddingLeft": 0,
      "paddingRight": 0,
      "subtitle": {"color": "#A1A1A1ff", "text": "", "fontSize": 16, "bold": true}
    }
  },
  "userOptions": {
    "show": false,
    "position": "right",
    "buttons": {
      "tooltip": false,
      "pdf": true,
      "csv": false,
      "img": true,
      "table": false,
      "labels": false,
      "fullscreen": true,
      "sort": false,
      "stack": false,
      "animation": false,
      "annotator": true
    },
    "buttonTitles": {
      "open": "Open options",
      "close": "Close options",
      "pdf": "Download PDF",
      "img": "Download PNG",
      "fullscreen": "Toggle fullscreen",
      "annotator": "Toggle annotator"
    }
  }
})


const dataset = reactive({
  "value": 10.6,
  "from": -50,
  "to": 100,
  "steps": 10,
  "colors": {
    "from": "#fe675d",
    "to": "#5d95ee"
  }
});

import {useCounterStore} from '@/stores/counter.ts'
import {storeToRefs} from 'pinia';
import {Timer} from "@vicons/carbon";
const counterStore = useCounterStore();
const {
  token,
  nowData,
  refreshFlag,

} = storeToRefs(counterStore)
const{
  getNowData
} = counterStore

watch(refreshFlag,(newValue) => {
  // console.log(nowData.value["327061430532576250"])
  dataset.value = nowData.value["327061430532576250"].value
}, {deep: true})

</script>

<template>
  <VueUiThermometer :config="config" :dataset="dataset"/>
</template>

